<template>
	<view class="my-page">
		<!-- 1. 顶部用户信息 -->
		<view class="header-section">
			<view class="user-info">
				<image class="avatar" v-show="userInfo.photo" :src="userInfo.photo" mode="aspectFill"></image>
				<view class="user-details">
					<view class="username" @click="navigateTo('userProfile')">
						{{ userInfo.name }}
						<!-- <uni-icons type="right" size="16" color="#333"></uni-icons> -->
					</view>
					<!-- <view class="fish-power" @click="navigateTo('fishPowerDetail')">
						<text class="label">鱼力值</text>
						<text class="value">795</text>
						<uni-icons type="right" size="12" color="#666"></uni-icons>
					</view> -->
				</view>
			</view>
			<view class="actions">
				<!-- <view class="action-item" @click="navigateTo('help')">
					<uni-icons type="help" size="22" color="#555"></uni-icons>
					<text>帮助与客服</text>
				</view> -->
				<view class="action-item" @click="navigateTo('settings')">
					<uni-icons type="gear" size="22" color="#555"></uni-icons>
					<text>设置</text>
				</view>
			</view>
		</view>

		<!-- 2. 会员卡片 -->
		<!-- <view class="membership-card-wrapper">
			<view class="membership-card">
				<view class="membership-info">
					<view class="title">闲鱼会员 <text class="level">X6</text></view>
					<view class="xp-notice">今日500经验值待领取, 来加速升级吧 ›</view>
				</view>
				<image class="fish-character" src="/static/fish_character.png" mode="widthFix"></image>
				<view class="xp-bubble">
					<text class="xp-value">+500</text>
					<text class="xp-label">经验值</text>
				</view>
			</view>
		</view> -->

		<!-- 3. 统计数据栏 -->
		<view class="stats-bar card-style" v-if="false">
			<view class="stat-item" @click="navigateTo('myFavorites')">
				<text class="stat-value">0</text>
				<text class="stat-label">我的收藏</text>
			</view>
			<view class="stat-item" @click="navigateTo('browsingHistory')">
				<text class="stat-value">0</text>
				<text class="stat-label">历史浏览</text>
			</view>
			<view class="stat-item" @click="navigateTo('myFollows')">
				<text class="stat-value">0</text>
				<text class="stat-label">我的关注</text>
			</view>
			<!-- <view class="stat-item" @click="navigateTo('myCoupons')">
				<text class="stat-value">0</text>
				<text class="stat-label">红包卡券</text>
			</view> -->
		</view>

		<!-- 4. TIPS 横幅 -->
		<!-- <view class="tips-banner card-style" @click="navigateTo('tipsDetail')">
			<image class="tips-logo" src="/static/tips_logo.png" mode="heightFix"></image>
			<text class="tips-text">重磅上线! 小铺运营提效包, 订单嗖嗖涨!</text>
			<uni-icons type="right" size="18" color="#999"></uni-icons>
		</view> -->

		<!-- 5. 我的交易 -->
		<view class="transactions-section card-style">
			<view class="transactions-header">
				<text class="title">我的交易</text>
				<!-- <text class="earnings">在市场赚了{{ userInfo.sellerTotalAmount || 0 }}元</text> -->
			</view>
			<view class="transactions-grid">
				<view class="transaction-item" @click="navigateTo('myPublished')">
					<uni-icons type="upload" size="28" color="#555"></uni-icons> <!-- 替换为正确图标 -->
					<text class="label">我的出租 <text class="count">{{ userInfo.myProductCount || 0 }}</text></text>
				</view>
				<view class="transaction-item" @click="navigateTo('mySold')">
					<uni-icons type="shop" size="28" color="#555"></uni-icons> <!-- 替换为正确图标 (¥) -->
					<text class="label">已出租的 <text class="count">{{ userInfo.sellerCount || 0 }}</text></text>
				</view>
				<view class="transaction-item" @click="navigateTo('myBought')">
					<uni-icons type="cart" size="28" color="#555"></uni-icons> <!-- 替换为正确图标 -->
					<text class="label">我租到的 <text class="count">{{ userInfo.buyCount || 0 }}</text></text>
				</view>
				<!-- <view class="transaction-item" @click="navigateTo('toReview')">
					<uni-icons type="chatbubble" size="28" color="#555"></uni-icons>
					<text class="label">待评价</text>
				</view> -->
			</view>
		</view>
		
		<!-- 可以继续添加更多模块 -->
		<view style="height: 40rpx;"></view> <!-- 底部留白 -->

	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			// 可以将动态数据放在这里
			userInfo: {},
		};
	},
	async onShow(){
		await this.getUserInfo()
		if(!uni.getStorageSync('token')){
			//请登录
			wx.reLaunch({
				url: '/pages/tb/login',
			})
		}
	},
	methods: {
		async getUserInfo(){
			if(uni.getStorageSync('token')){
				app.globalData.Request.post(app.globalData.ApiConstant.User.userInfo,{}).then((res) => {
				console.log(res)
				if (res.success) {
					const userInfo = {
					favoriteProductIds: res.favoriteProductIds,
					likeProductIds: res.likeProductIds,
					buyCount: res.buyCount,
					myProductCount: res.myProductCount,
					sellerCount: res.sellerCount,
					sellerTotalAmount: res.sellerTotalAmount,
					defaultAddress: res.defaultAddress,
					...res.user
					}
					uni.setStorageSync('userInfo',userInfo)
					this.userInfo = userInfo
				} else {
					//有异常
				}
				}).catch((err) => {})
				.finally(() => {});
			}
		
		},
		navigateTo(routeName) {
			console.log("Navigate to:", routeName);
			// uni.navigateTo({ url: '/pages/sub/' + routeName }); // 实际跳转逻辑
			uni.showToast({
				title: `跳转到 ${routeName}`,
				icon: 'none'
			})

			if(routeName === 'userProfile'){
				wx.navigateTo({
					url: '/pages/tb/my/editProfile'
				})
			}else if(routeName === 'settings'){
				wx.navigateTo({
					url: '/pages/tb/settings/settings'
				})
			}else if(routeName === 'myBought'){
				wx.navigateTo({
					url: '/pages/tb/order/orderList?type=buy'
				})
			}else if(routeName === 'myPublished'){
				wx.navigateTo({
					url: '/pages/tb/product/myProduct'
				})
			}else if(routeName === 'mySold'){
				wx.navigateTo({
					url: '/pages/tb/order/orderList?type=sell'
				})
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
.my-page {
	background-color: #f7f7f7; // 页面背景色
	min-height: 100vh;
	padding-bottom: 20rpx;
}

.card-style {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx 24rpx 0;
	padding: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 1. 顶部用户信息 */
.header-section {
	background-color: #fff;
	padding: 30rpx 24rpx 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start; // 顶部对齐头像和操作按钮
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
	margin-bottom: -10rpx; // 轻微重叠，让卡片压住一点点
	position: relative;
	z-index: 1;


	.user-info {
		display: flex;
		align-items: center;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			// 如果需要特殊形状，可能需要用clip-path或背景图
		}
		.user-details {
			.username {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: flex;
				align-items: center;
			}
			.fish-power {
				display: inline-flex; // 改为inline-flex使其包裹内容
				align-items: center;
				background-color: #f0f0f0;
				border-radius: 20rpx;
				padding: 4rpx 12rpx;
				margin-top: 8rpx;
				font-size: 22rpx;
				color: #666;
				.label {
					margin-right: 6rpx;
				}
				.value {
					font-weight: bold;
					margin-right: 4rpx;
				}
			}
		}
	}

	.actions {
		display: flex;
		align-items: flex-start;
		padding-top: 10rpx; // 稍微向下调整
		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20rpx;
			color: #555;
			margin-left: 30rpx;
			text {
				margin-top: 4rpx;
			}
		}
	}
}

/* 2. 会员卡片 */
.membership-card-wrapper {
	padding: 0 24rpx; // 与其他卡片对齐
	position: relative;
	z-index: 2; // 让会员卡片在header之上
}
.membership-card {
	background: linear-gradient(135deg, #6bd5a1, #48c388); // 绿色渐变
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-end; // 底部对齐内容和小鱼
	color: #fff;
	position: relative; // 为了经验值气泡定位
	overflow: hidden; // 防止小鱼溢出时破坏布局

	.membership-info {
		.title {
			font-size: 34rpx;
			font-weight: bold;
			.level {
				margin-left: 8rpx;
				font-style: italic;
			}
		}
		.xp-notice {
			font-size: 24rpx;
			margin-top: 10rpx;
			opacity: 0.9;
		}
	}

	.fish-character {
		width: 180rpx; // 根据实际图片调整
		position: relative;
		right: -10rpx; // 调整位置
		bottom: -10rpx; // 调整位置
		z-index: 1;
	}
	.xp-bubble {
		position: absolute;
		top: 30rpx;
		right: 110rpx; // 调整到小鱼的左上方
		background-color: rgba(255, 255, 255, 0.9);
		color: #3cb371; // 绿色
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		z-index: 2;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		.xp-value {
			font-size: 28rpx;
			line-height: 1.2;
		}
		.xp-label {
			font-size: 20rpx;
			line-height: 1.2;
		}
	}
}

/* 3. 统计数据栏 */
.stats-bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 30rpx 20rpx; // 上下padding增加
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		.stat-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		.stat-label {
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
		}
	}
}

/* 4. TIPS 横幅 */
.tips-banner {
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	.tips-logo {
		height: 32rpx; // 根据实际logo调整
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	.tips-text {
		flex-grow: 1;
		font-size: 26rpx;
		color: #555;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 10rpx;
	}
}

/* 5. 我的交易 */
.transactions-section {
	.transactions-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline; // 基线对齐
		margin-bottom: 30rpx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		.earnings {
			font-size: 24rpx;
			color: #999;
		}
	}
	.transactions-grid {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		.transaction-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			width: 25%; // 四等分
			.label {
				font-size: 24rpx;
				color: #555;
				margin-top: 12rpx;
				.count {
					font-weight: normal; // 数字不加粗
				}
			}
			uni-icons { // 如果使用 uni-icons
				margin-bottom: 0; // 图标和文字靠拢些
			}
			// 如果使用 image
			// image {
			// 	width: 56rpx;
			// 	height: 56rpx;
			// 	margin-bottom: 8rpx;
			// }
		}
	}
}
</style>